<template>
  <div>
    <el-row align="middle">
      <el-col :span="20">
        <span class="descriptions-title">空气质量详情</span>
      </el-col>
      <el-col :span="4" style="text-align: right">
        <el-button :size="size" type="primary" icon="el-icon-arrow-left" @click="goBack">返回</el-button>
      </el-col>
    </el-row>
    <el-descriptions direction="horizontal" :column="1" :size="size" border>
      <el-descriptions-item label="反馈者信息">
        <el-tag effect="dark" color="#409EFF" style="margin-right: 5px; color: black; border: none">{{ tableData.supervisorName }}</el-tag>
        <el-tag effect="dark" color="#409EFF" style="margin-right: 5px; color: black; border: none">{{ tableData.supervisorTelephone }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="网格员信息">
        <el-tag effect="dark" color="#409EFF" style="margin-right: 5px; color: black; border: none">{{ tableData.gridManName }}</el-tag>
        <el-tag effect="dark" color="#409EFF" style="margin-right: 5px; color: black; border: none">{{ tableData.gridManTelephone }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="反馈网格信息">
        <el-tag effect="dark" color="#FFA500" style="margin-right: 5px; color: black; border: none">{{ tableData.province }}</el-tag>
        <el-tag effect="dark" color="#FFA500" style="margin-right: 5px; color: black; border: none">{{ tableData.city }}</el-tag>
        <el-tag effect="dark" color="#FFA500" style="margin-right: 5px; color: black; border: none">{{ tableData.address }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="空气质量">
        <el-tag effect="dark" color="#67C23A" style="margin-right: 5px; color: black; border: none" v-if="tableData.rankId == '1'">一级</el-tag>
        <el-tag effect="dark" color="#FFFF00" style="margin-right: 5px; color: black; border: none" v-if="tableData.rankId == '2'">二级</el-tag>
        <el-tag effect="dark" color="#FFA500" style="margin-right: 5px; color: black; border: none" v-if="tableData.rankId == '3'">三级</el-tag>
        <el-tag effect="dark" color="#FF0000" style="margin-right: 5px; color: black; border: none" v-if="tableData.rankId == '4'">四级</el-tag>
        <el-tag effect="dark" color="#800080" style="margin-right: 5px; color: black; border: none" v-if="tableData.rankId == '5'">五级</el-tag>
        <el-tag effect="dark" color="#800000" style="margin-right: 5px; color: black; border: none" v-if="tableData.rankId == '6'">六级</el-tag>
        <el-tag effect="dark" color="#67C23A" style="margin-right: 5px; color: black; border: none" v-if="tableData.rankId == '1'">优</el-tag>
        <el-tag effect="dark" color="#FFFF00" style="margin-right: 5px; color: black; border: none" v-if="tableData.rankId == '2'">良好</el-tag>
        <el-tag effect="dark" color="#FFA500" style="margin-right: 5px; color: black; border: none" v-if="tableData.rankId == '3'">轻度污染</el-tag>
        <el-tag effect="dark" color="#FF0000" style="margin-right: 5px; color: black; border: none" v-if="tableData.rankId == '4'">中度污染</el-tag>
        <el-tag effect="dark" color="#800080" style="margin-right: 5px; color: black; border: none" v-if="tableData.rankId == '5'">重度污染</el-tag>
        <el-tag effect="dark" color="#800000" style="margin-right: 5px; color: black; border: none" v-if="tableData.rankId == '6'">严重污染</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="污染程度">
        <el-tag effect="dark" color="#FFA500" style="margin-right: 5px; color: black; border: none"
          >二氧化硫浓度{{ tableData.so2Concentration }}</el-tag
        >
        <el-tag effect="dark" color="#FFA500" style="margin-right: 5px; color: black; border: none"
          >一氧化碳浓度{{ tableData.coConcentration }}</el-tag
        >
        <el-tag effect="dark" color="#FFA500" style="margin-right: 5px; color: black; border: none"
          >PM2.5浓度{{ tableData.pm25Concentration }}</el-tag
        >
      </el-descriptions-item>

      <el-descriptions-item label="确定时间">
        <el-tag effect="dark" color="#FFA500" style="margin-right: 5px; color: black; border: none">{{ tableData.confirmDate }}</el-tag>
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import $axios from '../components/utils/axios'

const route = useRoute()
const router = useRouter()
const tableData = ref({})

const airQualityId = ref(route.params.id)
const init = async () => {
  console.log(airQualityId.value)
  const path = `/api/feedback/getAirQualityDetail/${airQualityId.value}`
  const { data: res } = await $axios.get(path)
  if (res.code === '200') {
    console.log(res)
    // tableData.value = res.data
    tableData.value = res.data
  }
}
init()

const goBack = () => {
  router.go(-1)
}
</script>
<style></style>
